<template>
  <div class="brand">
    <div class="container brand-content">
      <div class="background">
        <div class="cooperation-brand">
          <div class="title">
            <div class="text">合作品牌</div>
            <div>
              <el-link :underline="false">更多品牌<i class="el-icon-arrow-right" /></el-link>
            </div>
          </div>
        </div>
        <ul class="image">
          <li class="brand-image">
            <img class="brand-image" src="../../../assets/images/brand.png" alt="">
          </li>
          <li class="brand-image">
            <img class="brand-image" src="../../../assets/images/brand.png" alt="">
          </li>
          <li class="brand-image">
            <img class="brand-image" src="../../../assets/images/brand.png" alt="">
          </li>
          <li class="brand-image">
            <img class="brand-image" src="../../../assets/images/brand.png" alt="">
          </li>
          <li class="brand-image">
            <img class="brand-image" src="../../../assets/images/brand.png" alt="">
          </li>
          <li class="brand-image">
            <img class="brand-image" src="../../../assets/images/brand.png" alt="">
          </li>
          <li class="brand-image">
            <img class="brand-image" src="../../../assets/images/brand.png" alt="">
          </li>
          <li class="brand-image">
            <img class="brand-image" src="../../../assets/images/brand.png" alt="">
          </li>
          <li class="brand-image">
            <img class="brand-image" src="../../../assets/images/brand.png" alt="">
          </li>
          <li class="brand-image">
            <img class="brand-image" src="../../../assets/images/brand.png" alt="">
          </li>
          <li class="brand-image">
            <img class="brand-image" src="../../../assets/images/brand.png" alt="">
          </li>
          <li class="brand-image">
            <img class="brand-image" src="../../../assets/images/brand.png" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Brand',
  data() {
    return {

    }
  }
}
</script>
<style scoped lang="scss">
    .brand{
        background: #F5F5F5;
        .brand-content{

            .background{
                background:#FFFFFF;
                .cooperation-brand{
                    .title{
                      display: flex;
                      justify-content: space-between;
                        font-size:16px;
                        line-height:21px;
                      padding: 18px 20px 18px 20px;
                      .line{
                          white-space:nowrap;
                        }
                    }
                }
                .image{
                    display:flex;
                    flex-flow: row wrap;
                    margin-left: 20px;
                    .brand-image{
                        width:180px;
                        height:100px;
                        border:1px solid rgba(229,229,229,1);
                        margin:0px 15px 10px 0px;
                        cursor:pointer;
                    }
                }
            }
        }
    }
</style>
